import {
  Form,
  Input,
  InputNumber,
  Select,
  TimePicker,
  Checkbox,
  Button,
  Space,
} from "antd";
import React from "react";
import TheUpload from "@/components/TheUpload";
import TheQuill from "@/components/TheQuill";

const { RangePicker } = TimePicker;

class Add extends React.Component {
  state = {
    tags: [
      {
        label: "已消毒",
        value: 1,
        disabled: false,
      },
      {
        label: "造型专业",
        value: 2,
        disabled: false,
      },
      {
        label: "已打疫苗",
        value: 3,
        disabled: false,
      },
    ],
    tagsValue: [],
  };
  tagsChange = (value) => {
    this.setState({ tagsValue: value }, () => {
      let { tags, tagsValue } = this.state;
      if (tagsValue.length === 2) {
        this.setState({
          tags: tags.map((v) => {
            return {
              ...v,
              disabled: !tagsValue.includes(v.value),
            };
          }),
        });
      } else {
        this.setState({
          tags: tags.map((v) => {
            return {
              ...v,
              disabled: false,
            };
          }),
        });
      }
    });
  };
  setNewsContent = () => {};
  render() {
    const { tags, tagsValue } = this.state;
    return (
      <Form>
        <div style={{ fontSize: 16, fontWeight: "bold", marginBottom: 20 }}>
          基础信息
        </div>
        <Form.Item label="服务类型">
          <Select />
        </Form.Item>
        <Form.Item label="服务名称">
          <Input placeholder="请输入服务名称" />
        </Form.Item>
        <Form.Item label="服务图片">
          <TheUpload  maxSize={10} />
        </Form.Item>
        <Form.Item label="服务价格">
          <InputNumber placeholder="请输入服务价格" />
        </Form.Item>
        <Form.Item label="预约时间">
          <RangePicker formatter="HH:mm" />
        </Form.Item>
        <Form.Item label="服务标签">
          <Checkbox.Group options={tags} onChange={this.tagsChange} />
          {`${tagsValue.length}/2`}
        </Form.Item>
        <div
          style={{
            fontSize: 16,
            fontWeight: "bold",
            marginBottom: 20,
            paddingTop: 20,
            borderTop: "1px solid #f2f2f2",
          }}
        >
          服务说明
        </div>
        <Form.Item>
          <TheQuill defaultValue={" "} setNewsContent={this.setNewsContent} />
        </Form.Item>
        <Form.Item>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <Space>
              <Button onClick={this.props.closeDialog}>取消</Button>
              <Button onClick={this.props.closeDialog}>保存</Button>
              <Button type="primary" onClick={this.props.closeDialog}>
                发布
              </Button>
            </Space>
          </div>
        </Form.Item>
      </Form>
    );
  }
}

export default Add;
